﻿
<div id="synced-charts">
    <ApexChart TItem="TimeSeries"
               Title="Value"
               Options=options1
               Height="150"
               XAxisType="XAxisType.Datetime">

        <ApexPointSeries TItem="TimeSeries"
                         Items="data"
                         Name="Value"
                         SeriesType="SeriesType.Line"
                         XValue="@(e => e.Date)"
                         YAggregate="@(e => e.Sum(e => e.Value))"
                         OrderBy="e=>e.X"
                         Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
    </ApexChart>

    <ApexChart TItem="TimeSeries"
               Title="Quantity"
               Options=options2
               Height="150"
               XAxisType="XAxisType.Datetime">

        <ApexPointSeries TItem="TimeSeries"
                         Items="data"
                         Name="Quantity"
                         SeriesType="SeriesType.Area"
                         XValue="@(e => e.Date)"
                         YValue="@(e => e.Quantity)"
                         OrderBy="e=>e.X"
                         Stroke="@(new SeriesStroke { Width = 2, Color="#E51C15"})" />
    </ApexChart>
</div>

@code {
    private List<TimeSeries> data { get; set; } = new TimeSeriesGenerator(100).TimeSeries;
    private ApexChartOptions<TimeSeries> options1 = new();
    private ApexChartOptions<TimeSeries> options2 = new();

    protected override void OnInitialized()
    {
        const string groupName = "SyncGroup";
        const int YAxisMinWidth = 40;

        options1.Chart = new Chart { Group = groupName };
        options1.Yaxis = new List<YAxis> { new YAxis { 
                Labels = new YAxisLabels { MinWidth = YAxisMinWidth}}
        };

        options2.Chart = new Chart { Group = groupName};
        options2.Yaxis = new List<YAxis> { new YAxis
            {
                Labels = new YAxisLabels { MinWidth = YAxisMinWidth}}
        };

        options2.Chart.Toolbar = new Toolbar { Show = false };
        options2.Xaxis = new XAxis { TickPlacement = TickPlacement.On };

    }


    }